<template>
  <el-date-picker
    v-model="pData.zhi"
    type="daterange"
    :picker-options="pickerOptions"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="yyyy-MM-dd"
    align="right"
    size="small"
    clearable
    unlink-panels >
  </el-date-picker>
</template>

<script>
  export default {
      name: "dataYearMonthDayRange",
      props: {
          pData: Object
      },
      data() {
        return {
          pickerOptions: {
            shortcuts: [{
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }]
          },
        }
      },
      watch: {
        'pData.zhi': {
          handler(newName, oldName) {
            let nameEn = this.pData.nameEn;
            let startTime = "";
            let endTime = "";
            if(newName){
              startTime = newName[0];
              endTime = newName[1];
            }
            let clickName = this.pData.onclickName;
            const data = {};
            data["start_"+nameEn] = startTime;
            data["end_"+nameEn] = endTime;
            console.log(data)
            this.$emit(clickName, data)
          },
          deep: true,
        },
      },
      created() {},
      methods: {
        clearZhi() {
          this.pData.zhi = "";
        }
      },
    }
</script>

<style scoped>

</style>
